<template>
    <div class="ui centered card">
        <div class="content" v-show="!isEditing">
            <div class="header">
                {{ todo.title }}
            </div>
            <div class="meta" v-if="todo.time === null">
              完成时间
            </div>
          <div class="meta" v-else>
            {{todo.time}}
          </div>
            <div class="extra content" v-show="false">
                <span class="right floated edit icon" @click="isEditing=true">
                    <i class="edit link icon"></i>
                </span>
                <span class="right floated trash icon" @click="deleteTodo(todo)">
                    <i class="trash link icon"></i>
                </span>
            </div>
        </div>
        <div class="content" v-show="isEditing">
            <div class="ui form">
                <div class="field">
                    <label>Title</label>
                    <input type="text" v-model="todo.title" />
                </div>
                <div class="field">
                    <label>Project</label>
                    <input type="text" v-model="todo.project" />
                </div>
                <div class="ui two button attached buttons">
                    <button class="ui basic blue button" @click="isEditing=false">
                        关闭
                    </button>
                </div>
            </div>
        </div>
        <div class="ui bottom attached green basic button" v-show="!isEditing && todo.done === '1'" disabled>
            完成
        </div>
        <div class="ui bottom attached red basic button" v-show="!isEditing && todo.done === '0'" @click="completeTodo(todo)">
            待完成
        </div>
    </div>
</template>

<script>
export default {
  props: ['todo'],
  data () {
    return {
      isEditing: false
    }
  },
  methods: {
    deleteTodo (todo) {
      this.$emit('delete-todo', todo)
    },
    completeTodo (todo) {
      this.$emit('complete-todo', todo)
    }
  }
}
</script>

<style scoped>
input {
  text-align: center;
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>
